<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<body>

<th:block th:fragment="chat">

    <div id="chat_app" v-cloak class="flex-1 flex flex-col">

        <div class="chat-center flex-1 overflow-y-auto p-4" ref="messageList">
            <!-- 消息列表 -->
            <div v-for="(item,index) in chatList" :data-id="item.id" class="message-container"
                 :class="item.role+'-message-container'">
                <div class="avatar">
                    <img v-if="item.role=='bot'" src="/svg/robot.svg">
                    <img v-if="item.role=='user'" src="/svg/user.svg">
                </div>
                <div class="message" :class="analyzeObj[item.id]?'analyze-msg':''">
                    <div class="message-content" :class="'type-'+item.type">
                        <div v-if="item.type=='text'"
                             v-html="contentObj[item.id]||item.content" class="html-content"></div>
                        <el-image v-if="item.type=='pic'" :src="item.content" :preview-src-list="[item.content]"
                                  class="max-w-full rounded-md"
                                  alt="加载的图片"
                                  @load="handleImageLoad"
                                  @error="handleImageError"></el-image>
                    </div>
                </div>
                
                <!-- 开场问题显示在第一条机器人消息后 -->
                <div v-if="index === 0 && item.role === 'bot' && showOpeningQuestions && openingQuestions.length > 0" 
                     class="opening-questions-container">
                    <div class="opening-questions-list">
                        <div v-for="(question, qIndex) in openingQuestions" :key="qIndex" 
                             class="opening-question-item"
                             @click="clickOpeningQuestion(question)">
                            {{ question }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="chat-footer">
            <!-- 新增的上传区域 -->
            <div class="upload-area mt-3 px-2">
                <label class="px-3 py-2 text-white rounded-lg bg-gradient-to-r from-[#0066ff] to-[#3385ff]">
                    <i class="fas fa-paperclip me-1"></i> 上传图片
                    <input type="file" class="hidden" accept="image/*,.pdf,.doc,.docx,.txt" @change="fileChange">
                </label>
                <!--<small class="text-muted ms-2">支持图片、PDF、Word文档</small>-->
                <!-- <small class="text-muted ms-2">支持图片</small> -->
                <div id="filePreview" class="mt-2"></div>
            </div>

            <div class="chat-input">
                <textarea v-model="userInputMsg" class="message-input" id="message-input" placeholder="输入消息..."
                          rows="1" @keyup.enter="handleEnter"></textarea>
                <!-- 发送按钮 -->
                <button class="send-button" id="send-button" @click="sendTextMsg">
                    <img src="/svg/send.svg">
                </button>
                <!-- 语音按钮-->
                <block v-if="aiConfig.voiceInputStatus == 1 && chat_source == 'web'">
                    <button class="voice-button" id="voice-button">
                        <img src="/svg/voice.svg">
                    </button>
                </block>
            </div>
        </div>

    </div>


    <link rel="stylesheet" href="/css/chat.css">
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
        }
    </style>
    <script th:src="@{/js/chat.js}"></script>
</th:block>

</body>

</html>